<template>
  <div>
    <el-upload
      :action="uploadImageUrl"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-change="fileChange"
      :auto-upload="false"
      :limit="limit"
      :on-exceed="handleExceed"
      :on-remove="handleRemove"
      >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import store from '@/utils/config'
export default {
  name: 'aliossupload',

  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      uploadImageUrl:'',
    }
  },
  props: {
    limit:'',
    dir:''
  },
  mounted () {
    this.uploadImageUrl = store.fileHost;
  },
  methods: {
    async list_b(blob){
      //生成照片的名称
      var fileName = new Date().getTime() +''+ Math.floor(Math.random() * 150) + '.png';
      var nowTime = store.formatTime(new Date());
      var result = await store.store.put( this.dir + nowTime + '/' + fileName, blob);
      this.$emit('fileObj', result);
    },
    fileChange (file, fileList){
      this.list_b(file.raw);
    },
    //删除之后返回的值
    handleRemove(file, fileList) {
      this.$emit('imagesRemove', file);
    },
    handlePictureCardPreview(file, fileList) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      this.$emit('imagesPreview', file);
    },
    handleExceed (file, fileList){
        this.$message({
          message: '上传不能超过限制的张数',
          type: 'warning'
        });

      return;
    }
  }
}
</script>

